<%--
  Created by IntelliJ IDEA.
  User: 86191
  Date: 2022/11/24
  Time: 20:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <style>

        #box1 {
            margin: 170px auto;
            width: 300px;
            height: 300px;
            background-color: #525D76;
        }

        #box2 {
            margin: 20px auto;
            border-bottom: 1px solid red;
            width: 300px;
            height: 50px;
        }

        #u_name {
            height: 50px;
            width: 220px;
            /*去掉边框*/
            outline: none;
            border: 0px;
        }

        #box3 {
            margin: 20px auto;
            border-bottom: 1px solid red;
            width: 300px;
            height: 50px;
        }

        #u_pwd {
            height: 50px;
            width: 190px;
            border: 0px;
            /*去掉边框*/
            outline: none;
        }

        #box4 {
            height: 40px;
            width: 300px;
            text-align: center;
            line-height: 40px;
            background-color: red;
        }

        #box5 {
            margin: 20px;
            width: 300px;
            height: 30px;
            font-size: 15px;
            color: red;
        }
        #box6 {
             margin: 0px;
             width: 300px;
             height: 30px;
             font-size: 15px;
             color: red;
         }

    </style>
</head>
<body>
<div id="box1">
    <h2>成绩管理系统</h2>
    <form action="Login" method="post" id="login">
        <div id="box2">
            账号：<input type="text" name="name" id="u_name" value="${requestScope.users.u_name}">
        </div>
        <div id="box3">
            密码：<input type="password" name="pwd" id="u_pwd" value="${requestScope.users.u_pwd}">
            <span id="look">显示</span>
        </div>
        <button><div id="box4">下一步</div></button>

        <div id="box5">
            ${requestScope.error}
            ${requestScope.ts}
        </div>
    </form>
    <form action="TeacherLogin.jsp" method="post">
        <button id="box6">注册</button>
    </form>
</div>
<script>
    let xyb = document.getElementById("box4");
    let look = document.getElementById("look")
    let pwd = document.getElementById("u_pwd");
    let name = document.getElementById("u_name");
    let ts = document.getElementById("box5");

    let u_name = name.value;
    let u_pwd = pwd.value;
    //点击查看密码
    //如果fang等于1 显示密码 0不显示
    let fang = 1;
    look.onclick = function () {
        if (fang == 1) {
            pwd.type = "text";
            look.innerHTML = "不显示";
            fang = 0;
        } else {
            pwd.type = "password";
            look.innerHTML = "显示";
            fang = 1;
        }
    }

    //判断字符串是否为空
    function isEmpty(str) {
        if (str == null || str == "") {
            return true;
        }
        return false;
    }

    //判断姓名和密码是否为空
    xyb.onclick = function () {
        if (isEmpty(name.value)) {
            ts.innerHTML = "账户不能为空";
            return false;
        }
        if (isEmpty(pwd.value)) {
            ts.innerHTML = "密码不能为空";
            return false;
        } else {
            document.getElementById("login").onsubmit;
        }
    }
</script>
</body>
</html>
